<template>
  <div class="bg">
    <!-- <img src="/img/bg.png" class="bg" /> -->
    <div id="head">
      <!-- <img src="img/login_head.png" width="100%" height="auto"> -->
    </div>
    <div id="center">
      <h1 id="h1">邮箱登录</h1>

      <div class="input-group">
        <span id="span_username">邮箱：</span>
        <input
          class="form-control"
          id="username"
          name="username"
          type="text"
          v-model="email"
          placeholder="请输入邮箱"
          autocomplete="off"
          @blur="checkEmail"
        />
      </div>
      <div class="input-group">
        <span id="span_password">密码：</span>
        <input
          class="form-control"
          id="password"
          name="password"
          type="password"
          v-model="password"
          placeholder="请输入密码"
          autocomplete="off"
          @blur="checkPassword"
        />
      </div>

      <div id="btn_div">
        <button
          class="btn btn-primary"
          name="loginButton"
          type="button"
          id="loginemail"
          value="登录"
          @click="loginbyemail"
        >
          登录
        </button>
        <button
          class="btn btn-primary"
          name="loginButton"
          type="button"
          id="regist"
          value="注册"
          @click="gotoRegist"
        >
          注册
        </button>
        <button
          class="btn btn-primary"
          name="loginButton"
          type="button"
          id="loginphone"
          value="切换为手机验证码登录"
        >
          手机验证码登录
        </button>
      </div>
    </div>
  </div>
</template>
 
<script>
import router from "../../router";
export default {
  data() {
    return {
      email: "",
      password: "",
      count: "",
    };
  },
  methods: {
    //去注册页面
    gotoRegist() {
      router.push("register");
    },

    //验证邮箱格式
    checkEmail() {
      var newEamil = this.email;
      var emailPatt =
        /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
      if ("" == newEamil) {
        this.$message.error("请输入邮箱");
        return;
      } else if (!emailPatt.test(newEamil)) {
        this.$message.error("邮箱格式不正确，请检查输入");
        return;
      } else {
        this.$message({
          message: "邮箱输入成功",
          type: "success",
        });
      }
    },
    //验证密码：必须由字母，数字下划线组成，并且长度为5到12位
    checkPassword() {
      var newPass = this.password;
      if (newPass == "") {
        this.$message.error("请输入密码");
        return;
      } else {
        var passPatt = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/;
        if (!passPatt.test(newPass)) {
          this.value = "";
          this.$message.error(
            "密码必须由数字、字母两种字符组成,长度在8-15位之间"
          );
          return false;
        }
        this.password = newPass;
        this.$message({
          message: "密码输入成功",
          type: "success",
        });
      }
    },
    //登录
    loginbyemail() {
      let user = { email: this.email, password: this.password };
      this.$axios.post("/loginbyemail", user).then((res) => {
        
        if (
          res.data.code == 400 &&
          res.data.extend.result == "该用户已被冻结,暂时无法登录！"
        ) {
          this.$message.error("该用户已被冻结,暂时无法登录！");
          return;
        } else if(   res.data.code == 400 &&
          res.data.extend.result == "邮箱输入错误"){
            this.$message.error("暂无该用户，请先注册");
          return;
        }  else if (
          res.data.code == 200 &&
          "登陆成功" == res.data.extend.result
        ) {
          this.$message({
            message: "登录成功,三秒跳转到商城首页面",
            type: "success",
          });
          //签发jwt，记录登录用户个数
          localStorage.setItem("x-access-token", res.data.extend.jwt);
          this.countDown(); // 倒计时
        } 
      });
    },

    //倒计时三秒跳转到商城首页
    countDown() {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            //限制倒计时区间
            this.count--;
          } else {
            clearInterval(this.timer); //删除定时器
            this.timer = null;
            //跳转的页面写在此处
            router.push("../index");
          }
        }, 1000);
      }
    },
  },
};
</script>




<style scoped>
@import "../../assets/css/bootstrap.min.css";
@import "../../assets/css/login.css";
@import "../../assets/css/message.min.css";
* {
  margin: 0;
  padding: 0;
}
.bg {
  background: url("../../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
  height: 100vh;
}
</style>